{% extends 'base.html.twig' %}
 
{% block stylesheets %}
<style>
    #body {
        background: transparent url('{{ imgsrc("images/gamebg.jpg") }}?v=2') no-repeat top center;
        background-size: cover;
    }
    .title1 { margin: 0 auto; width: 170px; display: block; padding-top: 50px;}
    .goldcoin {
        font-size: 25px; text-align: center; margin: 20px auto 40px; 
        text-shadow: 1px 1px 1px #444; color: #eadfb0; 
        border-bottom: 2px solid #eadfb0; padding-bottom: 5px; width: 160px;
    }
    .title2 { margin: 0 auto; position: relative; width: 200px; text-align: center; color: #eadfb0; }
    .title2 img { width: 100%; }
    .title2 span { 
        color: #eadfb0; font-size: 16px; text-align: center; width: 28px;
        position: absolute; left: 16px; top: -2px;
    }
    .head-wrapper { width: 200px; margin: 0 auto; overflow-x: scroll; height: 30px; }
    .head-wrapper .heads { height: 30px; }
    .head-wrapper .head { display: block; width: 30px; height: 30px; float: left; margin: 0 5px; }
    .btn-wrapper { margin: 10px auto; width: 245px; }
    .btn-wrapper .btn { display: block; margin: 0 auto; width: 112px; }
    .btn-wrapper .gray { display: block; float: left; width: 76px; margin: 0 2px; }
    .btn-wrapper .btn img { width: 100%; }
    .notice { display: block; margin: 10px auto; width: 79px; }
    .sharenotice { font-size: 18px; text-align: center; color: white; margin: 10px auto; }
    .footer { margin: 15px auto; width: 220px; }
    .btnagain { display: block; width: 105px; float:left; }
    .btnshare { display: block; width: 105px; float:right; }
    .btnexit { display: block;  margin: 10px auto; width: 90px; }
    .footer img, .btnexit img { width: 100%; }
    .overlay .share { width: 100%; }
    @media all and (max-height: 460px) {
        .fa { padding-top: 15px; }
        .btn-wrapper { margin: 5px auto 0; }
        .btnagain { width: 100px; }
        .goldcoin { margin: 20px auto; }
    }
    @media all and (max-height: 420px) {
        .fa { padding-top: 15px; }
        .btn-wrapper { margin: 5px auto 0; }
        .notice { margin: 5px auto; }
        .btnagain { width: 100px; }
        .goldcoin { margin: 20px auto; }
        .footer { margin: 10px auto; }
        .title1 { padding-top: 30px; }
    }
</style>
{% endblock %}

{% block body %}
    <img class='title1' src='{{imgsrc("images/drawtitle1.png")}}'>
    <div class='goldcoin'>{{ app.user.coins }}</div>
    <div class='title2'>
        <img src='{{imgsrc("images/tuhao.png")}}?v=2'>
        <span>{{ friends|length }}</span>
    </div>
    <div class='head-wrapper'>
        <div class='heads clearfix' style='width: {{ 40*(friends|length) }}px;'>
            {% for friend in friends %}
            <img class='head' src='{{ friend.head }}'>
            {% endfor %}
        </div>
    </div>
    <div class='btn-wrapper'>
        {% if (app.user.nbraffled > 0 and app.user.coins >= 100000) or (app.user.nbraffled == 0 and app.user.coins >= 1000) %}
        <a class='btn' href='{{ urlFor("doraffle")}}'><img src='{{ imgsrc("images/btnprize.png") }}?v=1'></a>
        {% else %}
        <img class='btn' src='{{ imgsrc("images/btnprize-g.png") }}?v=2'>
        {% endif %}
    </div>
    <div class='footer clearfix'>
        <a class='btnagain' href='{{ urlFor("game")}}'><img src='{{ imgsrc("images/btnagain4.png")}}'></a>
        <a class='btnshare' href='#'><img src='{{ imgsrc("images/btnshare3.png")}}'></a>
    </div>
    <a class='btnexit' href='#'><img src='{{ imgsrc("images/btnexit.png")}}'></a>
    <div class='overlay'>
        <img class='share' src='{{ imgsrc("images/share.png") }}?v=2'>
    </div>
{% endblock %}
    
{% block javascripts %}
{#{{ js('js/velocity.ui.min.js') }}#}
<script>
$(function(){
    $('#body').css('height', h + 'px');
    $('.btnshare').click( function(e){
        e.preventDefault();
        $('.overlay').velocity('fadeIn');
        $('.overlay').velocity('fadeOut', { delay: 2000 });
    });
    $('.btnexit').click( function(e){
        e.preventDefault();
        wx.closeWindow();
    });
 });
</script>
{% endblock %}